<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="cjw">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <link type="text/css" rel="stylesheet" href="css/MyCss.css" />
  <script src="js/MyjsV0-8.js"></script>
  <style>
	*{margin: 0; padding: 0;}
	body{ height: 1100px;}
	body::-webkit-scrollbar {width: 4px;border-radius:2px;}
	body::-webkit-scrollbar-button {background-color: #fff;}  /* 滑轨两头的监听按钮颜色 */
	body::-webkit-scrollbar-track {height:100px;background: #fff;}/*滚动条的滑轨背景颜色 */
	body::-webkit-scrollbar-thumb {background: #ccc;border-radius: 5px;}
	label {display: block;}

	.filter_ico, .serch-click-bt-ico, .serch_ico {cursor: pointer;}
	/* S body */
	.body {width: 100%; height: 100%;}
	.body .body-con{width: 1228px; height: 100%; margin: auto auto;}
	
	/* 导航 */
	.body .body-con > .body-nav-no{width: 20%; height: 100%; float: left; background: #f6f4f0;}
		
	/* 内容 */
	.body > .body-con > .body-content{width: 80%; height: 100%; float: left; padding: 4px 0;}
		/* 动态内容展示 */
		.body-content-show {width: 80%; margin: auto; height:90%; padding: 4px 0;}
		.body-content-show li {margin-top: 4px;}
		.body-content-show li > div {width: 700px; height: 99px; box-shadow: 0px 1px 1px #ddd; border-radius: 4px; margin-top: 4px; cursor: pointer; padding: 8px; color: #cac7c7; cursor: pointer; margin: auto;}
		.body-content-show li > div:hover {box-shadow: 0px 1px 6px #ddd; color: #848080;}

		.body-content-show li > div > .item-tilte label:nth-child(1),.body-content-show li > div > .item-body label:nth-child(1) {float: left;}
		.body-content-show li > div > .item-tilte label:nth-child(2),.body-content-show li > div > .item-body label:nth-child(2) {float: right;}
		
		.body-content-show li > div > .item-body {width: 99%; height: 54px; margin-top: 2px;     padding: 4px;}
		.body-content-show li > div > .item-body label:nth-child(1){border-radius: 6px; overflow: hidden; width: 50px; height: 50px; margin: auto; }
		.body-content-show li > div > .item-body label:nth-child(2) {width: 621px; padding-top: 1px; height: 51px; overflow: hidden;}

		.item-tag label {background: #ddd; border-radius: 4px; padding: 2px 4px; display: inline-block; color: #fff; float:right;}
		/* 选页组件 */
		.select-page {padding: 2px;}
		.left-bt {background: url(img/left.png); cursor: pointer; }
		.right-bt {background: url(img/right.png); cursor: pointer; margin-right: 162px;}
		.left-bt:hover {background: url(img/left_hover.png);}
		.right-bt:hover {background: url(img/right_hover.png);}

		.select-page > div > label {float: right;}
		.select-page > div > label li {float: left; border-radius: 4px; line-height: 32px; text-align: center; width: 32px; height: 32px; color: #ccc; cursor: pointer;}
		.select-page > div > label li:hover {box-shadow: 1px 1px 6px #ddd;}
	/* E body */

	.body-nav{ position: fixed; top: 0; height: 100%; background: #f6f4f0; display: none;}
		/* 个人信息 */
		.body-nav > .nav-ifnor {padding-top: 30px;}
		.body-nav > .nav-ifnor > label{text-align: center; margin-top: 8px; cursor: pointer;}
		.body-nav > .nav-ifnor > label:nth-child(1){border-radius: 6px; overflow: hidden; width: 80px; height: 80px; margin: auto;}
		.body-nav > .nav-ifnor > label:nth-child(4){width: 64px; margin: auto;}

		.body-nav > .nav-ifnor .github {background: url(img/github.png); float: left;}
		.body-nav > .nav-ifnor .email {background: url(img/email.png); float: left;}
		
		/* 导航栏 */
		.body-nav > .nav-list {margin:10px 0px;}
		.body-nav > .nav-list li {height: 25px; line-height: 25px; text-align: center; cursor: pointer;}

	.more-oprate {position: fixed; display: none; top: 4px; }
	.more-oprate li{width: 38px; height: 38px; position: relative;}
	.li-cnt {background:#fff; overflow:hidden; position:absolute; top:-2px; right:37px; width:0px; height:38px; transition:all 0.2s ease-out; color:#888;}
	.more-oprate li:hover .li-cnt{width: 268px; box-shadow: 0px 1px 6px #ddd;}
	.serch_ico {background: url(img/serch.png);margin: 2px 2px;}

	.li-cnt > label {float: left;margin-top: 5px;}
	.li-cnt > label:nth-child(1) {border-bottom: 1px solid #e6e6e6; margin-left: 5px}
	.serch-input , select{width: 228px; height: 25px; border: none; outline: none; color: #888; font-size: 14px;}
	.serch-click-bt-ico {background: url(img/sure.png); width: 25px; height: 25px;}
	.serch-click-bt-ico:hover {background: url(img/sure_hover.png); }

	.filter_ico {background: url(img/filter.png);}
	/* S - foot */
	.foot {min-height: 50px;}
	.bom_container {height: 40px; width: 900px; margin:auto;}
	/* E - foot */
  </style>
 </head>
 <body>
	<!-- 隐藏栏 -->
	<div class="more-oprate">
		<ul class="nolist">
			<li title="查找">
				<i class="serch_ico"></i>
				<div class="li-cnt">
					<label>
						<input type="text" class="serch-input"/> 
					</label>
					<label>
						<i class="serch-click-bt-ico"></i>
					</label>
				</div>
			</li>
			<li title="过滤">
				<i class="filter_ico"></i>
				<div class="li-cnt">
					<label>
						<select>
							<option value ="all">全部</option>
							<option value ="java">java</option>
							<option value ="javaScript">javaScript</option>
							<option value="HTML">HTML</option>
						</select>
					</label>
					<label>
						<i class="serch-click-bt-ico"></i>
					</label>
				</div>
			</li>
		</ul>
	</div>
	<!-- 左栏 -->
	<div class="body-nav">
		<!-- 个人信息 -->
		<div class="nav-ifnor">
			<label>
				<img src="img/pho.jpg" width="80" height="80" alt="chenjiwei"/>
			</label>
			<label>
				ChenJiWei
			</label>
			<label>
				码出人生...
			</label>
			<label class="clearFloat">
				<i onclick="link.open('https://github.com/ChenJiWei95');" class="github" title="https://github.com/ChenJiWei95"></i>
				<i class="email" title="chenJiWey@163.com"></i>
			</label>
		</div>
		<!-- 导航栏 -->
		<div class="nav-list">
			<ul class="nolist">
				<li>首页</li>
				<li>API</li>
				<li>项目</li>
				<li>总结</li>
				<li>生活</li>
				<li>关于我</li>
			</ul>
		</div>
	</div>
	<!-- S body -->
	<div class="body">
		<div class="body-con clearFloat">
			<!-- 导航 -->
			<div class="body-nav-no">
				
			</div>
			<!-- 内容 -->
			<div class="body-content">
				<!-- 动态内容展示 -->
				<div class="body-content-show">
					<ul class="nolist">
						<li>
							<div>
								<!-- 标题 -->
								<label class="item-tilte clearFloat">
									<label>JavaScript API</label>
									<label>2018年9月18日 23:16</label>
								</label>
								<!-- 内容 -->
								<label class="item-body">
									<label><img src="img/pho.jpg" width="50px" height="50px" alt="chenjiwei"/></label>
									<label><br><br>修改了$$.ajax函数</label>
								</label>
								<!-- 相关 标签 -->
								<label class="item-tag">
									<label>javaScript</label>
								</label>
							</div>
						</li>
						<li>
							<div>
								<!-- 标题 -->
								<label class="item-tilte clearFloat">
									<label>Java Spring MVC</label>
									<label>2018年9月18日 23:10</label>
								</label>
								<!-- 内容 -->
								<label class="item-body">
									<label><img src="img/pho.jpg" width="50px" height="50px" alt="chenjiwei"/></label>
									<label>1、用户向服务器发送请求，请求被SpringMVC的前端控制器DispatcherServlet截获。
2、DispatcherServlet对请求的URL（统一资源定位符）进行解析，得到URI(请求资源标识符)，然后根据该URI，调用HandlerMapping获得该Handler配置的所有相关的对象，包括Handler对象以及Handler对象对应的拦截器，这些对象都会被封装到一个HandlerExecutionChain对象当中返回。
3、DispatcherServlet根据获得的Handler，选择一个合适的HandlerAdapter。HandlerAdapter的设计符合面向对象中的单一职责原则，代码结构清晰，便于维护，最为重要的是，代码的可复制性高。HandlerAdapter会被用于处理多种Handler，调用Handler实际处理请求的方法。</label>
								</label>
								<!-- 相关 标签 -->
								<label class="item-tag">
									<label>java</label>
								</label>
							</div>
						</li>
						<li>
							<div>
								<!-- 标题 -->
								<label class="item-tilte clearFloat">
									<label>JavaScript API</label>
									<label>2018年9月18日 23:16</label>
								</label>
								<!-- 内容 -->
								<label class="item-body">
									<label><img src="img/pho.jpg" width="50px" height="50px" alt="chenjiwei"/></label>
									<label><br><br>修改了$$.ajax函数</label>
								</label>
								<!-- 相关 标签 -->
								<label class="item-tag">
									<label>javaScript</label>
								</label>
							</div>
						</li>
						<li>
							<div>
								<!-- 标题 -->
								<label class="item-tilte clearFloat">
									<label>JavaScript API</label>
									<label>2018年9月18日 23:16</label>
								</label>
								<!-- 内容 -->
								<label class="item-body">
									<label><img src="img/pho.jpg" width="50px" height="50px" alt="chenjiwei"/></label>
									<label><br><br>修改了$$.ajax函数</label>
								</label>
								<!-- 相关 标签 -->
								<label class="item-tag">
									<label>javaScript</label>
								</label>
							</div>
						</li>
						<li>
							<div>
								<!-- 标题 -->
								<label class="item-tilte clearFloat">
									<label>JavaScript API</label>
									<label>2018年9月18日 23:16</label>
								</label>
								<!-- 内容 -->
								<label class="item-body">
									<label><img src="img/pho.jpg" width="50px" height="50px" alt="chenjiwei"/></label>
									<label><br><br>修改了$$.ajax函数</label>
								</label>
								<!-- 相关 标签 -->
								<label class="item-tag">
									<label>javaScript</label>
								</label>
							</div>
						</li>
						<li>
							<div>
								<!-- 标题 -->
								<label class="item-tilte clearFloat">
									<label>JavaScript API</label>
									<label>2018年9月18日 23:16</label>
								</label>
								<!-- 内容 -->
								<label class="item-body">
									<label><img src="img/pho.jpg" width="50px" height="50px" alt="chenjiwei"/></label>
									<label><br><br>修改了$$.ajax函数</label>
								</label>
								<!-- 相关 标签 -->
								<label class="item-tag">
									<label>javaScript</label>
								</label>
							</div>
						</li>
						<li>
							<div>
								<!-- 标题 -->
								<label class="item-tilte clearFloat">
									<label>JavaScript API</label>
									<label>2018年9月18日 23:16</label>
								</label>
								<!-- 内容 -->
								<label class="item-body">
									<label><img src="img/pho.jpg" width="50px" height="50px" alt="chenjiwei"/></label>
									<label><br><br>修改了$$.ajax函数</label>
								</label>
								<!-- 相关 标签 -->
								<label class="item-tag">
									<label>javaScript</label>
								</label>
							</div>
						</li>
						<li>
							<div>
								<!-- 标题 -->
								<label class="item-tilte clearFloat">
									<label>JavaScript API</label>
									<label>2018年9月18日 23:16</label>
								</label>
								<!-- 内容 -->
								<label class="item-body">
									<label><img src="img/pho.jpg" width="50px" height="50px" alt="chenjiwei"/></label>
									<label><br><br>修改了$$.ajax函数</label>
								</label>
								<!-- 相关 标签 -->
								<label class="item-tag">
									<label>javaScript</label>
								</label>
							</div>
						</li>
					</ul>
				</div>

				<!-- 选页组件 -->
				<div class="select-page clearFloat">
					<div>
						<label><i class="right-bt"></i></label>
						<label><ul class="nolist">
							<li>1</li>
							<li>2</li>
						</ul></label>
						<label><i class="left-bt"></i></label>
					</div>
				</div>
				<!--S -  foot-->
				<div class="foot">
					<div class="bom_container">
						<li style="color:#586069;list-style:none;padding:10px 245px;">Copyright ©2018 <span  style="color:#a71d5d;cursor:pointer;" title="作者介绍">chen</span> Powered By <span  style="color:#a71d5d;cursor:pointer;" title="程序目录">My Blog</span> Version 1.0.0</li>
					</div>
				</div>
				<!--E - foot-->
			</div>
		</div>
	</div>
	<!-- E body -->
	<script>
	initAndUpdate();
	window.onresize = function(e){
		initAndUpdate();
	}
	function initAndUpdate(){
		//对导航条的初始化和随着窗口的变动进行更新
		var bodyNavNo = $(".body-nav-no")[0];
		var marginLeft = bodyNavNo.getBoundingClientRect().left;
		var width = bodyNavNo.clientWidth;
		var bodyNav = $(".body-nav")[0];
		
		bodyNav.style.width = width + "px";
		bodyNav.style.left = marginLeft + "px";
		bodyNav.style.display = "block";

		//更多操作
		var bodyContentShow = $(".body-content-show")[0];
		//$(".more-oprate")[0].style.top = 100 + "px";
		$(".more-oprate")[0].style.left = (bodyContentShow.getBoundingClientRect().right - 38) + "px";
		$(".more-oprate")[0].style.display = "block";
	}
	
	
	liEvent_2.extends(LiEventSuper);
	function liEvent_2(data){
		LiEventSuper.call(this, data);

		this.overEventCss = function (i){
			data.liElements[i].css("background:#555; color:#fff;", false); 
		}
		//当前移出样式设置
		this.outEventCss = function (i){
			data.liElements[i].css("background:#f6f4f0; color:#555;", false); 
		}
		//e {i:preIndex}
		this.preClickFun = function (i){
			data.liElements[i].css("background:#f6f4f0; color:#555;", false);
		}
		//设置当前的元素 
		//e {i:i}
		this.nowClickFun = function (i){
			data.liElements[i].css("background:#555; color:#fff;", false);
		}
	}
	//左栏选择内容
	new liEvent_2({
		liElements:$(".nav-list")[0].$("li"),
		cntElements:[]
	}).doReady();
	</script>
 </body>
</html>